/**
 * Created by whb on 2017/4/17.
 */
import React ,{Component} from "react"

export default class SimpleSlider extends Component {
    constructor(...args) {
        super(...args)
        this.state = {
            zuobiaox: 0,
            zuobiaox2: 0,

        }
    }

    componentDidMount () {
        this.scrollLeftChange({target:{value:600}})
    }

    scrollLeftChange = (e) =>{
        const a = e.target.value
        let c = document.getElementById('photo-list')
        c.scrollLeft = e.target.value
    }

    onDragStart=(e)=>{
        this.setState({
            zuobiaox:e.clientX
        })
    }

    onDragOver =(e)=> {
        this.setState({
            zuobiaox2:e.clientX-this.state.zuobiaox,
        })
        let c = document.getElementById('photo-list')
        let ul = document.getElementById('scroll')
        let lis = ul.getElementsByTagName('li')
        let itemCount = lis.length
        let width = lis[0].offsetWidth  //获得每个img容器的宽度
        if(this.state.zuobiaox2<0){
            c.scrollLeft += 3
            if (c.scrollLeft % width <= 1 && c.scrollLeft!=600) {
                ul.appendChild(ul.firstElementChild)
                c.scrollLeft = 600
            }
        }else if(this.state.zuobiaox2>0){
            c.scrollLeft -= 3
            if(c.scrollLeft % width <= 1 && c.scrollLeft!=600){
                    ul.insertBefore(ul.lastElementChild,ul.firstElementChild)
                    c.scrollLeft = 600
            }
        }
        ul.style.width = width * itemCount + 'px'//加载完后设置容器长度
    }

    render(){
        return (
            <div className="photo-list" id="photo-list">
                <ul id="scroll"  onDragStart={this.onDragStart} onDragOver={this.onDragOver}>
                    <li><img src={require('../img/1.jpg')} width="600px" height="300px" /></li>
                    <li><img src={require('../img/2.jpg')} width="600px" height="300px" /></li>
                    <li><img src={require('../img/3.jpg')} width="600px" height="300px" /></li>
                    <li><img src={require('../img/4.jpg')} width="600px" height="300px" /></li>
                    <li><img src={require('../img/5.jpg')} width="600px" height="300px" /></li>
                    <li><img src={require('../img/6.jpg')} width="600px" height="300px" /></li>
                </ul>
            </div>
        )
    }
}